<template>
  <div class="container">
    <!-- 顶部按钮区域 -->
    <el-card>
      <el-form :inline="true" size="small">
        <el-form-item label="案件ID">
          <el-input v-model="queryData.caseMainId" placeholder="案件ID" />
        </el-form-item>
        <el-form-item label="案件状态">
          <el-select v-model="queryData.disposeStatus">
            <el-option
              v-for="item in anJStatus"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictSort"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="案件类型">
          <el-select v-model="queryData.chekinDictJflxId">
            <el-option
              v-for="item in dict_jflxData"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictSort"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="queryData.demandsName" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="queryData.demandsCardno" />
        </el-form-item>
        <el-form-item label="乡镇">
          <el-select v-model="queryData.checkinTownshipId" placeholder="乡镇">
            <el-option
              v-for="item in checkin_township"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登记时间">
          <el-date-picker
            v-model="dengjiTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="回访时间">
          <el-date-picker
            v-model="huifangTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList"
            >查 询</el-button
          >
          <el-button type="primary" icon="el-icon-edit" @click="addBtn"
            >导 出</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table
        :data="tableData"
        size="small"
        style="max-height: 550px; overflow: auto"
      >
        <el-table-column
          label="案件ID"
          prop="caseMainId"
          width="80"
        ></el-table-column>
        <el-table-column
          label="登记时间"
          prop="createTime"
          width="180"
        ></el-table-column>
        <el-table-column label="简要事由" prop="checkinSummary" width="300">
          <template slot-scope="scope">
            <el-popover
              width="400"
              class="item"
              effect="dark"
              :content="scope.row.checkinSummary"
              placement="top-start"
              trigger="hover"
            >
              <span slot="reference">{{
                scope.row.checkinSummary.slice(0, 80) +
                (scope.row.checkinSummary.length > 80 ? "..." : "")
              }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="纠纷类型"
          prop="checkinDictJflxName"
        ></el-table-column>
        <el-table-column
          label="诉求人姓名"
          prop="demandsName"
        ></el-table-column>
        <el-table-column
          label="身份证号"
          prop="demandsCardno"
          width="180"
        ></el-table-column>
        <el-table-column
          label="家庭住址/或单位"
          prop="demandsAvatar"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="案件状态" prop="disposeStatus">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.disposeStatus == 0" type="">{{
              dictFomt(scope.row.disposeStatus)
            }}</el-tag>
            <el-tag v-if="scope.row.disposeStatus == 1" type="danger">{{
              dictFomt(scope.row.disposeStatus)
            }}</el-tag>
            <el-tag v-if="scope.row.disposeStatus == 2" type="warning">{{
              dictFomt(scope.row.disposeStatus)
            }}</el-tag>
            <el-tag v-if="scope.row.disposeStatus == 3" type="success">{{
              dictFomt(scope.row.disposeStatus)
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="分流窗口" prop="checkinExperiencedSysUserName"></el-table-column> -->
        <el-table-column label="分配" prop="checkinDeptName"></el-table-column>
        <el-table-column label="附件" width="50">
          <template #default="scope">
            <el-tag type="info">{{
              scope.row.deptdisposeFile
                ? scope.row.deptdisposeFile.split(",").length
                : "无"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="disposeStatus">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.deptdisposeFile"
              type="text"
              size="mini"
              @click="initPrint(scope.row)"
              >下载附件</el-button
            >
            <el-button v-else disabled type="text" size="mini"
              >下载附件</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="delAj(scope.row)"
              v-has-permi="['del_admin']"
              >删 除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px; margin-bottom: 15px; float: right">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="totals"
        >
        </el-pagination>
      </div>
    </el-card>
    <div ref="print" v-show="dawdwadf">
      <div style="width: 250mm; height: 297mm; padding: 20mm">
        <div style="width: 100%; height: 100%; font-size: 12px">
          <div style="text-align: center; font-size: 24px">诉求人信息</div>
          <div style="margin-top: 10px; margin-bottom: 10px">
            一、诉求人基本信息
          </div>
          <div class="adwadwadwa">姓名：{{ anJianInfo.demandsName }}</div>
          <div class="adwadwadwa">性别：{{ anJianInfo.demandsSexNmae }}</div>
          <div class="adwadwadwa">
            手机号：{{ anJianInfo.checkinPhonenumber }}
          </div>
          <div class="adwadwadwa">
            身份证号码：{{ anJianInfo.demandsCardno }}
          </div>
          <div class="adwadwadwa">联系地址：{{ anJianInfo.demandsAvatar }}</div>
          <div style="margin-top: 10px; margin-bottom: 10px">二、诉求内容</div>
          <div class="adwadwadwa">
            诉求事项：{{ anJianInfo.checkinDictJflxName }}
          </div>
          <div class="adwadwadwa">
            详细说明：{{ anJianInfo.checkinSummary }}
          </div>
          <div style="margin-top: 10px; margin-bottom: 10px">
            三、声明与承诺
          </div>
          <div class="adwadwadwa" style="width: 90%">
            我确认以上填写的个人信息真实、准确、完整，如有虚假信息，愿意承担相应的法律责任。
            我所陈述的诉求内容真实可靠，是本人的真实意愿表达，不存在恶意编造或歪曲事实的情况。
            我提供的证据材料均为真实、合法取得，如有伪造或篡改证据的行为，愿意接受法律的制裁。
            我将积极配合相关部门或机构对我的诉求进行调查和处理，如实提供所需的信息和协助。
          </div>
          <div style="margin-top: 10px; margin-bottom: 10px">四、签字确认</div>
          <div class="adwadwadwa">诉求人（签字并捺印）：____________</div>
          <div class="adwadwadwa">日期：{{ anJianInfo.checkinAcceptTime }}</div>
        </div>
      </div>
      <!--          <div style="width: 649px; height: 1124px; padding: 20px">-->

      <!--          </div>-->
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import printJs from "print-js";
import { mainlist, mainDel } from "@/api/aapal";
import { getDicts } from "@/api/system/dict/data";
import { computed } from "vue";
export default {
  data() {
    return {
      huifangTime: "",
      dengjiTime: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      anJianInfo: {},
      queryData: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      },
      tableData: [],
      dawdwadf: false,
      anJStatus: [],
      ruleForm: [],
      totals: 2888,
    };
  },
  mounted() {
    this.getList();
    this.getDict();
  },

  methods: {
    delAj(row) {
      this.$confirm("此操作将永久删除该案件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          mainDel(row.caseMainId).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /* 分别赋值时间 */
    setQueryTime() {
      this.queryData.startDengjiTime = this.dengjiTime
        ? this.dengjiTime[0]
        : "";
      this.queryData.endDengjiTime = this.dengjiTime ? this.dengjiTime[1] : "";
      this.queryData.startHuifangTime = this.huifangTime
        ? this.huifangTime[0]
        : "";
      this.queryData.endHuifangTime = this.huifangTime
        ? this.huifangTime[1]
        : "";
    },
    addBtn() {
      // 设置时间参数
      this.setQueryTime();
      this.download(
        "system/main/export",
        {
          ...this.queryData, // 使用正确的 queryData
        },
        `案件信息${new Date().getTime()}.xlsx`
      );
    },
    getList() {
      this.setQueryTime();
      mainlist(this.queryData).then((res) => {
        this.tableData = res.rows;
        this.totals = res.total;
      });
    },
    dictFomt(val) {
      var r = "";
      this.anJStatus.forEach((item) => {
        if (item.dictValue == val) {
          r = item.dictLabel;
        }
      });
      return r;
    },
    getDict() {
      getDicts("dict_jflx").then((res) => {
        this.dict_jflxData = res.data;
      });
      getDicts("dispose_status").then((res) => {
        this.anJStatus = res.data;
      });
      getDicts("checkin_township").then((res) => {
        this.checkin_township = res.data;
      });
    },
    handleCurrentChange(val) {
      this.queryData.pageNum = val;
      this.getList();
    },
    // initPrint(row) {
    //   this.anJianInfo = row
    //   this.dawdwadf = true
    //   this.$nextTick(() =>{

    //     this.printWay()
    //   })
    // },
    initPrint(row) {
      var fileUrls = row.deptdisposeFile.split(",");
      console.log(fileUrls);
      for (var i = 0; i < fileUrls.length; i++) {
        var url = fileUrls[i];
        console.log(url);
        var name = url.substring(
          url.lastIndexOf("/") + 1,
          url.lastIndexOf(".")
        ); // 提取文件名（不包括后缀）
        var suffix = url.substring(url.lastIndexOf("."), url.length); // 提取文件后缀
        const a = document.createElement("a");
        a.setAttribute("download", name + suffix); // 设置下载属性
        a.setAttribute("href", process.env.VUE_APP_BASE_API + url); // 设置链接的 href 属性
        document.body.appendChild(a); // 将链接添加到文档中
        a.click(); // 触发点击事件
        document.body.removeChild(a); // 下载完成后移除链接
      }
      // fileUrls.forEach((url) => {
      //
      // });
    },
    printWay() {
      const printContent = this.$refs.print;
      // 获取dom 宽度 高度
      const width = printContent.clientWidth;
      console.log(width);
      const height = printContent.clientHeight;
      // 创建一个canvas节点
      const canvas = document.createElement("canvas");
      const scale = 1; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
      canvas.width = width * scale; // 定义canvas 宽度 * 缩放
      canvas.height = height * scale; // 定义canvas高度 *缩放
      canvas.style.width = width * scale + "px";
      canvas.style.height = height * scale + "px";
      canvas.getContext("2d").scale(scale, scale); // 获取context,设置scale

      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
      const scrollLeft =
        document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度

      html2canvas(printContent, {
        canvas,
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight,
        scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
        scrollY: -scrollTop,
      })
        .then((canvas) => {
          const url = canvas.toDataURL("image/png");
          printJs({
            printable: url,
            type: "image",
            documentTitle: "", // 标题
            style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}", // 去除页眉页脚
          });
          this.dawdwadf = false;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    /* 头部tabs切换 */
    handleClick() {},
    /* 搜索按钮 */
    onSearch() {},
    /* 重置按钮 */
    onReset() {
      this.searchQuery1 = "";
      this.searchQuery2 = "";
    },
    // 处理
    handleItem(row) {
      console.log("Handling item:", row);
    },
    // 删除
    deleteItem(row) {
      console.log("Deleting item:", row);
    },
    // 分页更改
    handlePageChange(page) {
      this.currentPage = page;
      console.log("Page changed to:", page);
    },
  },
};
</script>

<style scoped>
.container {
  margin: 20px 30px;
  font-family: "Arial", sans-serif;
}

.header {
  margin-bottom: 20px;
  background-color: #f4f7fa;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.button {
  font-size: 14px;
  padding: 8px 16px;
}

.search-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.search-input {
  width: 200px;
  margin-right: 20px;
  border-radius: 4px;
}

.search-btn,
.reset-btn {
  padding: 8px 16px;
  font-size: 14px;
}

.search-btn {
  background-color: #409eff;
  color: white;
  margin-right: 10px;
}

.reset-btn {
  background-color: #f0f2f5;
  color: #333;
}

.process-btn {
  background-color: #409eff;
  color: white;
  margin-right: 5px;
  border-radius: 4px;
}

.delete-btn {
  background-color: #f56c6c;
  color: white;
  border-radius: 4px;
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.el-table td {
  font-size: 14px;
  line-height: 40px;
}

.el-table-row:hover {
  background-color: #f0f9ff;
}

.pagination {
  font-size: 14px;
}

.el-pagination__prev,
.el-pagination__next {
  background-color: #409eff;
  color: white;
}

.el-pagination__pager {
  color: #409eff;
}

.adwadwadwa {
  margin-left: 30px;
  line-height: 25px;
}
</style>
